<template>
	<div class="list" ref="wrapper">
		<div>
			<div class="list-wrap">
				<h3 class="title">当前城市</h3>
				<div class="city-list">
					<div class="city-item-wrap">
						<div class="city-item">{{city}}</div>
					</div>
				</div>
			</div>
			<div class="list-wrap">
				<h3 class="title">热门城市</h3>
				<div class="city-list">
					<div class="city-item-wrap" v-for="item of hotCities" :key="item.id">
						<div class="city-item" @click="handleCityClick(item.name)">{{item.name}}</div>
					</div>
				</div>
			</div>
			<div class="list-wrap" v-for="(value,key) of cities" :ref="key">
				<h3 class="title">{{key}}</h3>
				<ul class="all-list">
					<li class="all-item border-bottom" v-for="item in value" @click="handleCityClick(item.name)" >{{item.name}}</li>
				</ul>
			</div>
		</div>
	</div>
</template>
<script>
	import Bscroll from 'better-scroll'
	import {mapMutations,mapState} from 'vuex'
	export default{
		name:"CityList",
		props:{
			hotCities:Array,
			cities:Object,
			elKey:String
		},
		computed:{
			...mapState(["city"])
		},
		methods:{
			handleCityClick(city){
				// this.$store.commit("changeCity",city)
				this.changeCity(city)
				this.$router.push("/")
			},
			...mapMutations(['changeCity'])

		},
		watch:{
			elKey(){
				let el = this.elKey
				this.scroll.scrollToElement(this.$refs[el][0])
			}
		},
		mounted(){
			this.scroll = new Bscroll(this.$refs.wrapper)
			this.scroll.on('touchEnd',(pos) => {
				console.log(pos)
			})
		}
	}
</script>
<style lang="less" scoped>
	.border-bottom{
		border-bottom:.01rem solid #ccc;
	}
	.list{
		position: absolute;
		top:1.7rem;
		bottom: 0;
		left: 0;
		right: 0;
		overflow: hidden;
		.title{
			background: #eee;
			padding-left: .2rem;
			height: .44rem;
			line-height: .44rem;
			color:#666;
		}
		.city-list{
			padding-right: .2rem;
			padding: 0.1rem 0.6rem 0.1rem 0.1rem;
			overflow: hidden;
			.city-item-wrap{
				float: left;
				width: 33.33%;
				.city-item{
					border: 0.02rem solid #ccc;
					text-align: center;
					padding:.1rem 0;
					margin:.1rem;
					border-radius: .06rem;
				}
			}
		}
		.all-list{
			.all-item{
				padding:.2rem .2rem;
			}
		}
	}
</style>